<template>
  <div class="centextBar" id="banner_details" v-cloak>
    <div class="title">
      <div class="title">查看详情</div>
      <div class="buttonBar float-right">
       <!-- <button class="button bt button-small">返回
        </button>
        <button  class="button bt button-small">删除
        </button>-->
        <button style="margin-right:60px;color: #5bc590; background-color: #fff; border-color: #5bc590;"
               class="btn">编辑用户
        </button>
      </div>
      <div class="clear"></div>
    </div>
    <div class="tableBox">
      <table class="detail-table" style="border-collapse: separate; margin-left: 20px;">
        <tbody>
        <tr>
          <td style="text-align:left;padding: 0px;vertical-align: middle;background-color: rgba(255, 255, 255, 1);"
              class="vl">用户名&nbsp;:
          </td>
          <td style="text-align:left;padding: 0px;margin-left: -8%;background-color: rgba(255, 255, 255, 1);"
              class="text-grey">{{userName}}
          </td>
        </tr>
        <tr>
          <td style="text-align:left;padding: 0px;vertical-align: middle;" class="vl">登录名&nbsp;:</td>
          <td style="text-align:left;padding: 0px;margin-left: -8%;" class="text-grey">{{displayName}}
          </td>
        </tr>
        <tr>
          <td style="text-align:left;padding: 0px;vertical-align: middle;background-color: rgba(255, 255, 255, 1);"
              class="vl">联系电话&nbsp;:
          </td>
          <td style="text-align:left;padding: 0px;margin-left: -8%;background-color: rgba(255, 255, 255, 1);"
              class="text-grey">{{phoneNumber}}
          </td>
        </tr>
        <tr>
          <td style="text-align:left;padding: 0px;vertical-align: middle;" class="vl">状态&nbsp;:</td>
          <td style="text-align:left;padding: 0px;margin-left: -8%;" class="content text-grey"><span
            v-if="status == 'EFFECT'">有效</span>
            <span v-if="status == 'LOSE_EFFECT'">无效</span></td>
        </tr>
        <tr>
          <td style="text-align:left;background-color: rgba(255, 255, 255, 1);padding: 0px;vertical-align: middle;"
              class="vl">创建时间&nbsp;:
          </td>
          <td style="text-align:left;background-color: rgba(255, 255, 255, 1);padding: 0px;margin-left: -8%;"
              class="content text-grey"><span v-if="createTime">{{createTime}}</span></td>
        <tr>
          <td style="text-align:left;padding: 0px;vertical-align: middle;" class="vl">权限&nbsp;:</td>
          <td style="text-align:left;padding: 0px;margin-left: -8%;" class="content text-grey">
            <span>运营人员</span></td>
        </tr>
        </tbody>
      </table>
    </div>
    <!-- 右侧取消按钮 -->
    <div class="buttonBar" style=" float:right">
      <button type="button" class="btn"
              style="margin-right:60px;color:#5bc590;background-color:#fff;border-color:#5bc590; " @click="cancel">
        &nbsp;&nbsp;返回&nbsp;&nbsp;
      </button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "banner_details",
    data() {
      return {
          userName:'admin',
          displayName:'超级管理员',
          phoneNumber:'123455678901',
          createTime:'2017-12-14 12：00：00',
          status:'EFFECT'
      }
    },
    methods:{
      cancel(){
        var self = this
        self.$router.push({
          path: '/banner'
        })
      },
    }
  }
</script>

<style scoped>
  table th {
    text-align: left;
  }

  .tableBox tr:nth-child(odd) td {
    background: none;
  }

  .vl {
    color: #666666;
    font-size: 16px;
    width: 3%;
  }

  .detail-table tr td {
    height: 12px !important;
    border-bottom: 1px dashed #e8e8e8;
  }

  .tableBox {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto !important;
    background: transparent !important;
  }
</style>
